<template>
	<ComPop
		v-model="show"
		width="600px"
		title="新增客户"
		@saveSubmit="saveCustomer"
	>
		<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
			<el-row :gutter="20">
				<!-- <el-col :span="24" class="mb-4">
					<el-form-item label="客户编号" prop="code">
						<el-input v-model="form.code" disabled readonly />
					</el-form-item>
				</el-col> -->
				<el-col :span="24" class="mb-4">
					<el-form-item label="客户名称" prop="name">
						<el-input
							v-model="form.name"
							maxlength="20"
							show-word-limit
							placeholder="请输入客户名称"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="所属辖区" prop="region">
						<el-select v-model="form.region" placeholder="请选择所属辖区">
							<el-option
								v-for="item in dicts.xzqh.value"
								:key="item.value || item"
								:label="item.label || item"
								:value="item.value || item"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="客户类型" prop="customerType">
						<el-select v-model="form.customerType" placeholder="请选择客户类型">
							<el-option label="个人客户" value="个人客户" />
							<el-option label="企业客户" value="企业客户" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="联系人" prop="contact">
						<el-input
							v-model="form.contact"
							maxlength="20"
							show-word-limit
							placeholder="请输入联系人"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="联系电话" prop="phone">
						<el-input
							v-model="form.phone"
							maxlength="11"
							placeholder="请输入联系电话"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb-4">
					<el-form-item label="备注" prop="remark">
						<el-input
							v-model="form.remark"
							type="textarea"
							:rows="5"
							maxlength="500"
							show-word-limit
							placeholder="请输入备注（选填，最多500字）"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</ComPop>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useDict } from '/@/hooks/dict';
const dicts = useDict(['xzqh']);
const show = ref(false);
const formRef = ref();
const form = reactive({
	code: '',
	name: '',
	region: '',
	customerType: '',
	contact: '',
	phone: '',
	remark: '',
});
const rules = {
	name: [
		{ required: true, message: '请输入客户名称', trigger: 'blur' },
		{ min: 2, max: 20, message: '客户名称长度为2-20个字符', trigger: 'blur' },
	],
	region: [{ required: true, message: '请选择所属辖区', trigger: 'change' }],
	customerType: [
		{ required: true, message: '请选择客户类型', trigger: 'change' },
	],
	contact: [
		{ required: true, message: '请输入联系人', trigger: 'blur' },
		{ min: 2, max: 20, message: '联系人长度为2-20个字符', trigger: 'blur' },
	],
	phone: [
		{ required: true, message: '请输入联系电话', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号',
			trigger: 'blur',
		},
	],
	remark: [{ max: 500, message: '备注最多500个字符', trigger: 'blur' }],
};
function saveCustomer() {
	formRef.value.validate((valid: boolean) => {
		if (valid) {
			// TODO: 提交表单逻辑
			show.value = false;
		}
	});
}
function open(options: { code: string }) {
	form.code = options.code;
	show.value = true;
}
defineExpose({ open });
</script>
